/**
* 功能描述: 基础滑动选择器demo
* @author 崔孝楠
* @date 2022/9/21 13:47
* @version 1.0
*/
<template>
  <div class="content">
    <!-- 基础滑动 -->
    <div class="yw-slider">
      <div class="yw-slider-rail"></div>
      <div class="yw-slider-track" style="left: 0%; right: auto; width: 45%;"></div>
      <div class="yw-slider-step"></div>
      <div class="yw-slider-handle"
           id="handle"
           style="left: 45%; right: auto; transform: translateX(-50%);"
           tabindex="0"
           @focus="addFocused('handle')"
           @blur="removeFocused('handle')"
      />
    </div>
    <!-- 带节点的滑动 -->
    <div class="yw-slider">
      <div class="yw-slider-rail"></div>
      <div class="yw-slider-track" style="left: 0%; right: auto; width: 30%;"></div>
      <div class="yw-slider-step">
        <span class="yw-slider-dot yw-slider-dot-active" style="left: 26%;" />
        <span class="yw-slider-dot" style="left: 37%;" />
      </div>
      <div class="yw-slider-handle"
           id="handleDot"
           style="left: 30%; right: auto; transform: translateX(-50%);"
           tabindex="0"
           @focus="addFocused('handleDot')"
           @blur="removeFocused('handleDot')"
      />
    </div>

    <button @click="disabled()">disabled</button>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      sliderDisabled: false,
    }
  },
  methods: {
    /**
     * 添加聚焦样式
     * @param id 元素id
     */
    addFocused(id) {
      let handle = document.getElementById(id)
      handle.classList.add('yw-slider-handle-focused')
    },
    /**
     * 移除聚焦样式
     * @param id 元素id
     */
    removeFocused(id) {
      let handle =  document.getElementById(id)
      handle.classList.remove('yw-slider-handle-focused')
    },
    /**
     * 切换禁用状态
     */
    disabled() {
      this.sliderDisabled = !this.sliderDisabled
      let handles = document.getElementsByClassName('yw-slider')
      Array.from(handles).forEach((item) => {
        if(this.sliderDisabled) {
          item.classList.add('yw-slider-disabled')
        } else {
          item.classList.remove('yw-slider-disabled')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
button {
  width: 60px;
  height:30px;
  line-height: 30px;

}
</style>
